<template>
  <div>
        <ul>
            <li v-for="item in novel" :key="item.id">
                <img :src="item.cover" alt="">
                <h4>{{ item.title }}</h4>
                <p>{{ item.author }}</p>
            </li>
        </ul>
  </div>
</template>

<script>
import {mapState,mapGetters,mapMutations,mapActions} from "vuex"
// npm i pubsub-js 下载并引入
import pubsub from "pubsub-js"
// npm i axios  全局安装axios 并引入
import axios from "axios"

export default {
    name:"storyBook",
    components:{
      
    },
    computed:{
        ...mapState("novel",["novel"]), //数组形式用key和value一致时
        // ...mapGetters("novel",["novelList"])

    },
    created(){
      this.$store.commit('novel/getNovelList','')
    //   console.log(this.$store);
    },
    data() {
      return {
        
      }
    },
    methods:{
      ...mapMutations("novel",{getNovelList:'getNovelList'})

    }
}
</script>

<style scoped>
*{
    margin: 0;
    padding: 0;
}
ul{
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style-type: none;
}
ul li{
    margin: 10px;
}
ul li img{
    width: 110px;
    height: 150px;
    border-radius: 5px;
}
ul li h4{
    margin: 3px 0;
}
ul li p{
    color: #444444;
    font-size: 14px;
}
</style>